<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>执剑系统登录</title>
    <link rel="icon" href="./images/gongzhenglogo.png">
    <link rel="stylesheet" href="./bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 400px;
            max-width: 90%;
        }
        
        .login-logo {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-logo h2 {
            font-weight: 700;
            color: #242a38;
            margin-top: 15px;
        }
        
        .login-form .form-control {
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            margin-bottom: 20px;
        }
        
        .login-form .form-control:focus {
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
            border-color: #4361ee;
        }
        
        .login-btn {
            background: #4361ee;
            border: none;
            padding: 12px;
            border-radius: 8px;
            width: 100%;
            font-weight: 600;
            margin-top: 10px;
            transition: all 0.3s;
        }
        
        .login-btn:hover {
            background: #3f37c9;
            transform: translateY(-2px);
        }
        
        .error-message {
            color: #f72585;
            font-size: 14px;
            margin-top: 15px;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-logo">
            <img src="./images/gongzhenglogo.png" alt="Logo" width="80">
            <h2>执剑系统登录</h2>
        </div>
        <div class="login-form">
            <div class="mb-3">
                <label for="secretKey" class="form-label">请输入秘钥</label>
                <input type="password" class="form-control" id="secretKey" placeholder="请输入您的访问秘钥">
            </div>
            <button id="loginBtn" class="btn btn-primary login-btn">登录系统</button>
            <div id="errorMessage" class="error-message">秘钥无效，请重新输入</div>
        </div>
    </div>
    
    <script>
        document.getElementById('loginBtn').addEventListener('click', function() {
            const secretKey = document.getElementById('secretKey').value.trim();
            const errorMessage = document.getElementById('errorMessage');
            
            if (!secretKey) {
                errorMessage.textContent = '请输入秘钥';
                errorMessage.style.display = 'block';
                return;
            }
            
            // 显示加载状态
            this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 验证中...';
            this.disabled = true;
            
            // 发送请求验证秘钥
            fetch(`http://localhost:8080/api/secret-keys/byKeyValue?keyValue=${encodeURIComponent(secretKey)}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('秘钥验证失败');
                    }
                    return response.json();
                })
                .then(data => {
                    // 验证成功，将秘钥存储到sessionStorage
                    sessionStorage.setItem('secretKey', secretKey);
                    // 跳转到管理页面
                    window.location.href = 'admin.html';
                })
                .catch(error => {
                    console.error('登录失败:', error);
                    errorMessage.textContent = '秘钥无效，请重新输入';
                    errorMessage.style.display = 'block';
                    
                    // 恢复按钮状态
                    this.innerHTML = '登录系统';
                    this.disabled = false;
                });
        });
        
        // 支持按回车键登录
        document.getElementById('secretKey').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('loginBtn').click();
            }
        });
    </script>
</body>
</html>